<template id="homepage">
    <div id="m_common_header" style="display: block;">
      <header class="jd-header ">
            <div class="jd-header-new-bar" id="jd_header_new_bar">
                <div report-eventid="MCommonHead_Back" report-eventparam="https://wq.jd.com/mcoss/wxmall/home" id="m_common_header_goback" class="jd-header-icon-back  J_ping">
                    <span @click="goback()"></span>
                </div>
                <div class="jd-header-new-title">京喜</div>
                <div report-eventid="MCommonHead_NavigateButton" report-eventparam="https://wq.jd.com/mcoss/wxmall/home" id="m_common_header_jdkey" class="jd-header-icon-new-shortcut J_ping">
                    <span @click="change01()"></span>
                </div>
                <div v-show="show01" class="header-shortcut">
                    <i></i>
                    <ul>
                        <li class="one">
                            <span></span>
                            <router-link to="/homepage">首页</router-link>
                        </li>
                        <li class="two">
                            <span></span>
                            <router-link to="/type">分类搜索</router-link>
                        </li>
                        <li class="thress">
                            <span></span>
                            <router-link to="/ShoppingCart">购物车</router-link>
                            
                        </li>
                        <li class="four">
                            <span></span>
                            <router-link to="/my">我的京东</router-link>
                            
                        </li>
                        <li class="five">
                            <span></span>
                            <router-link to="/tootprint">浏览记录</router-link>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <div class="h-nav-big">
                <div class="header-nav">
                    <div class="header-search">
                        <form action="">
                            <i class="searchfdj"></i>
                            <input type="search" placeholder="运动鞋">
                        </form>
                    </div>
                    <div class="header-nav-bottom">
                        
                            <div class="h-nav-b-left">
                                <router-link to="/JingXuan">
                                精选
                                <i></i>
                                </router-link>
                            </div>
                        
                        <div class="h-nav-b-center">
                            <div class="h-nav-b-center-wrap">
                            <ul>
                                <li><router-link to="/XieXue">鞋靴<i></i></router-link></li>
                                <li>美妆</li>
                                <li>家电</li>
                                <li>数码</li>
                                <li>家具</li>
                                <li>手机</li>
                                <li>运动</li>
                                <li>内衣</li>
                                <li>男装</li>
                                <li>女装</li>
                                <li>配饰</li>
                                <li>生鲜</li>
                                <li>钟表</li>
                                <li>水果</li>
                                <li>百货</li>
                            </ul>
                            </div>
                        </div>
                        <div class="h-nav-right">
                            <div class="tab-nav__menu-btn">
                                <i></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <section>
            <router-view></router-view>
        </section>
    </div>
</template>

<script>
export default {
  data() {
    return {
        show01:false
    };
  },
  methods:{
      change01(){
          this.show01=!this.show01
      },
      goback(){
          this.$router.go(-1)
      }
  }
};
</script>

<style scoped>
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
#m_common_header{
    position: relative;
    z-index: 10;
}
.jd-header,.jd-header a{
    font-family: PingHei,Lucida Grande,Lucida Sans Unicode,STHeiti,Helvetica,Arial,Verdana,"sans-serif";
    font-size: 16px;
    text-decoration: none;
    color: #252525;
}
.jd-header{
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 44px;
    text-decoration: none;
    color: #252525;
}
.jd-header-new-bar{
    position: relative;
    border-bottom: none!important;
    min-height: 44px;
    background: #fff;
}
.jd-header-icon-back, .jd-header-icon-logo{
    position: absolute;
    width: 40px;
    height: 44px;
}
.jd-header-icon-back span{
    display: inline-block;
    margin: 12px 0 0 10px;
    width: 20px;
    height: 20px;
    background: url(../../assets/images/header-left.png) no-repeat 50%;
    background-position: 0 0;
    background-size: contain;
}
.jd-header-icon-back span, .jd-header-icon-cancel span, .jd-header-icon-search span, .jd-header-icon-shortcut span{
    overflow: hidden;
    text-indent: -100px;
}
.jd-header-icon-new-shortcut{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
}
.jd-header-icon-new-shortcut span{
    display: inline-block;
    margin: 12px 12px 12px 10px;
    width: 20px;
    height: 20px;
    background: url(../../assets/images/header-right.png) no-repeat 50%;
    background-size: 20px;
}
.jd-header-new-title{
    margin: 0 70px;
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h-nav-big{
    background:url(../../assets/images/4944a8cff1b2b1a7.png) no-repeat;
    background-size: 100% auto;
}
.header-nav{
    margin: 0px 10px; 
}
.header-search{
    width: 100%;
}
.header-search form{
    position: relative;
}
.header-search input{
    width: 100%;
    border: none;
    line-height: 29px;
    margin: 5px 0px;
    border-radius: 30px;
    padding-left: 25px;
    padding-right: 10px;
    font-size: 14px; 
    outline: none;
    color: #333;  
}
.searchfdj{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 11px;
    left: 5px;
    background:url(../../assets/images/d0026a136beefeb9.png) no-repeat;
    background-size: 100% auto;
}
.header-nav-bottom{
    display: flex;
    font-weight: 700;
    color: hsla(0,0%,100%,.8);
    font-size: 14px;
}
.header-nav-bottom a{
    color:hsla(0,0%,100%,.8);
    font-size: 14px;
}
.h-nav-b-left .router-link-exact-active.router-link-active{
    font-size: 16px;
    color: #fff;
}
.h-nav-b-left .router-link-exact-active.router-link-active i{
    display: block;
}
.h-nav-b-left{
    min-width: 2.65rem;
    text-align: center;
    height: 2rem;
}
.h-nav-b-left i{
    display: none;
    width: 0.5rem;
    height: 0.1rem;
    background: #fff;
    border-radius: 0.1rem;
    margin: 0 auto;
}
.h-nav-b-center i{
    display: none;
    width: 0.5rem;
    height: 0.1rem;
    background: #fff;
    border-radius: 0.1rem;
    margin: 0 auto;
}
.h-nav-b-center{
    height: 2rem; 
    overflow-x: auto;
    width: calc(100% - 20px - 2.65rem);
}
.h-nav-b-center .router-link-exact-active.router-link-active{
    font-size: 16px;
    color: #fff;
}
.h-nav-b-center .router-link-exact-active.router-link-active i{
    display: block;
}
.h-nav-b-center-wrap{
   overflow: hidden;
   width: 39.75rem;
   /* overflow-x: scroll;
    overflow-y: hidden; */
}
.h-nav-b-center ul{
    display: flex;
    
}
.h-nav-b-center li{
    width: 2.65rem;
    text-align: center;
}
.tab-nav__menu-btn{
    width: 1.65rem;
}
.tab-nav__menu-btn i{
    display: block;
    width: 0.6rem;
    height: 0.5rem;
    background: url(../../assets/images/8669aaf0862a8109.png) no-repeat;
    background-size: 100% auto;
    margin:0 auto;
    margin-top: 7px;
}
.header-shortcut{
    z-index: 2;
    position: absolute;
    bottom:-213px;
    right: 10px;
    color: #fff;
    
}
.header-shortcut>ul{
    background: rgba(0,0,0,.9);
    border-radius: 4px;
    width: 125px;
    margin-top: -1px;
}
.header-shortcut>ul>li{
    line-height: 40px;
    border-bottom: 1px solid hsla(0,0%,100%,.2);
    margin-left: 40px;
    font-size: 14px;
    position: relative;
}
.header-shortcut>ul a{
    color: #fff;
    text-decoration: none;
}
.header-shortcut>i{
    display: block;
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(0,0,0,.9);
    margin-left: 105px;
}
.header-shortcut>ul .one span{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../assets/images/cut01.png) no-repeat;
    background-size: 45% auto;
    position: absolute;
    left: -27px;
    top: 9px;
}
.header-shortcut>ul .two span{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../assets/images/cut02.png) no-repeat;
    background-size: 45% auto;
    position: absolute;
    left: -27px;
    top: 9px;
}
.header-shortcut>ul .thress span{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../assets/images/cut03.png) no-repeat;
    background-size: 45% auto;
    position: absolute;
    left: -27px;
    top: 9px;
}
.header-shortcut>ul .four span{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../assets/images/cut04.png) no-repeat;
    background-size: 45% auto;
    position: absolute;
    left: -27px;
    top: 9px;
}
.header-shortcut>ul .five span{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../../assets/images/cut05.png) no-repeat;
    background-size: 45% auto;
    position: absolute;
    left: -27px;
    top: 9px;
}
.header-shortcut .router-link-exact-active.router-link-active{
    color: #fff;
}
</style>